<template>
    <div style="height: 100vh" class="common-layout">
        <el-container>
        <el-header style="background-color:#e3f2fd;;"><NavBar/></el-header>
        <el-container>
            <el-aside width="18vw" style="height:93vh;background-color: #E2E4E6;padding: 0;">
                <el-row class="tac">
                <el-col :span="24">
                    <el-menu
                    default-active="2"
                    class="el-menu-vertical-demo"
                    router
                    :default-openeds="openeds"
                    >
                    <el-menu-item index="">
                        <el-icon><icon-menu /></el-icon>
                        <span> <router-link :to="{name:'home'}" class="nav-link">医疗模型上传</router-link></span>
                    </el-menu-item>
                    <el-sub-menu index="2">
                        <template #title>
                        <el-icon><location /></el-icon>
                        <span>可视分析</span>
                        </template>
                        <el-menu-item-group >
                        <el-menu-item index="present1">左肾预测精确度展示</el-menu-item>
                        <el-menu-item index="present2" >脾脏预测精确度的展示</el-menu-item>
                        <el-menu-item index="present3"  >肝脏预测精确度的展示</el-menu-item>
                        <el-menu-item index="present4">主动脉预测精确度的展示</el-menu-item>
                        <el-menu-item index="present5" >胃预测精确度的展示</el-menu-item>
                        <el-menu-item index="present6"  >胆囊预测精确度的展示</el-menu-item>
                        <el-menu-item index="present7">下腔静脉预测精确度的展示</el-menu-item>
                        <el-menu-item index="present8" >十二指肠预测精确度的展示</el-menu-item>
                        <el-menu-item index="present9">右肾上腺预测精确度的展示</el-menu-item>
                        <el-menu-item index="present10" >胰预测精确度的展示</el-menu-item>
                        <el-menu-item index="present11">膀胱预测精确度的展示</el-menu-item>
                        <el-menu-item index="present12">食管预测精确度的展示</el-menu-item>
                        <el-menu-item index="" style="color:#409EFF">左肾上腺预测精确度的展示</el-menu-item>
                        <el-menu-item index="present14">前列腺/子宫预测精确度的展示</el-menu-item>
                        <el-menu-item index="present15">右肾预测精确度的展示</el-menu-item>
                        </el-menu-item-group>
                    </el-sub-menu>
                    </el-menu>
                </el-col>
                </el-row>
            </el-aside>
            <el-container>
            <el-main>
                <div>
                    <div id="report" style="width: 78vw;height: 30vh;"></div>
                    <div id="report1" style="width: 78vw;height: 59vh;"></div>
                </div>
            </el-main>
            </el-container>
        </el-container>
        </el-container>
    </div>
  </template>
  
  
  <script>
  import NavBar from '@/components/NavBar.vue';
  import 'bootstrap/dist/js/bootstrap.min.js'
  import 'bootstrap/dist/css/bootstrap.css'
  import {
    Document,
    Menu as IconMenu,
    Location,
    Setting,
    } from '@element-plus/icons-vue'
  import * as echarts from "echarts";

  
    export default{
        name: 'PresentView1',
        components: {
            NavBar,
        },
        data(){
            return {
                Document,
                IconMenu,
                Location,
                Setting,
                openeds:['2']
            }
        },
        methods: {
            draw(id) {
            this.charts = echarts.init(document.getElementById(id));
            this.charts.setOption({
                title: {
                    text: '左肾上腺预测精确度的展示'
                },
                xAxis: {
                    type: 'category',
                    data: ['1','2','3','4','5','6','7','8','9','10','11','12','13','14','15','16','17','18','19','20','21','22','23','24','25','26','27','28','29','30','31','32','33','34','35','36','37','38','39','40'],
                },
                yAxis: {
                    type: 'value'
                },
                series: [
                {
                    data: [0.82334,
0.82198,
0.81432,
0.82296,
0.82236,
0.81806,
0.814,
0.81524,
0.81541,
0.81876,
0.80502,
0.80894,
0.81174,
0.81477,
0.80107,
0.79554,
0.77634,
0.80373,
0.80374,
0.80522,
0.75759,
0.80545,
0.7893,
0.78697,
0.77367,
0.64686,
0.78058,
0.77937,
0.68908,
0.78152,
0.77485,
0.68908,
0.78098,
0.77735,
0.77774,
0.77358,
0.76395,
0.75399,
0.75592,
0.6746,

                            ],
                    type: 'line'
                }
                ],
            });
            },
            draw1(id) {
            this.charts = echarts.init(document.getElementById(id));
            this.charts.setOption({
                legend: {
                    top: 'bottom'
                },
                toolbox: {
                    show: true,
                    feature: {
                    mark: { show: true },
                    dataView: { show: true, readOnly: false },
                    restore: { show: true },
                    saveAsImage: { show: true }
                    }
                },
                series: [
                    {
                    name: 'Nightingale Chart',
                    type: 'pie',
                    radius: [50, 250],
                    center: ['50%', '50%'],
                    roseType: 'area',
                    itemStyle: {
                        borderRadius: 8
                    },
                    data: [

                        { value:19, name:"80%以上"},
                        { value:17, name:"70%以上"},
                        { value:4, name:"60%以上"},
                    ]
                    }
                ]
            });
            }
        },
        mounted() {
            this.$nextTick(function() {
            this.draw("report");
            this.draw1("report1");
            });
        }
    }
  </script>